<template>
<div>
  <div
    class="slot-main VideoMultiScreen"
    v-loading="loading"
    element-loading-text="初始化视频中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="area-select">
      <el-select
        size="mini"
        v-model="videoCodeArr"
        @change="onChangeType"
        multiple
        placeholder="请选择监控"
        style="width: 100%"
        popper-class="area-popper"
      >
        <el-option
          v-for="item in cameraList"
          :key="item.sbid"
          :label="item.sbmc"
          :value="item.sbid"
        >
        </el-option>
      </el-select>
    </div>
    <div class="button-group">
      <div
        v-for="(item, index) of buttonList"
        class="button-list"
        :key="index"
        @click="handleClick(item)"
      >
        <div
          class="flex-center img-box"
          :class="item.name === active ? 'active-box' : 'box'"
        >
          <img
            :src="item.name === active ? item.activeImg : item.img"
            width="36px"
            height="36px"
          />
          <span>
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <InspetionVideo :isShow="isInspetionVideo"></InspetionVideo>
</div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { setAccessToken } from "~/assets/modules/auth";
import BasePaenl from "./CBase.vue";
import { toBase64 } from "../../utils/Base64encoding";
import CryptoJS from "crypto-js";
import {
  keepalive,
  VideoUrlLogin,
  VideoUrlLogin2
} from "~/assets/modules/videoService";
import InspetionVideo from "../dialogs/CInspetionVideo.vue";

@Component({
  name: "CVideoMultiScreen",
  components: { BasePaenl, InspetionVideo }
})
export default class extends Vue {
  get equipmentData() {
    return this.$store.getters["videoData/equipmentData"];
  }
  get currentVideo() {
    return this.$store.getters["videoData/currentVideo"];
  }

  get projectInfo() {
    return this.$store.getters["videoData/projectInfo"];
  }
  @Watch("equipmentData", { deep: true, immediate: true })
  handleEquipmentData(val: any) {
    this.init(val);
  }
  cameraList: any = [];
  typeOptions: any = [];
  videoCodeArr: any = [];
  options: any = {
    type: "online"
  };
  active = "单画面";
  timeEvent: any = null;
  panelWindowNum: number = 1;
  loading: boolean = false;
  buttonList: any = [
    {
      name: "单画面",
      num: 1,
      img: require("@/assets/images/panels/danhuamian-qian.png"),
      activeImg: require("@/assets/images/panels/danhuamian-hou.png")
    },
    {
      name: "双画面",
      num: 2,
      img: require("@/assets/images/panels/shuanghuamianqian.png"),
      activeImg: require("@/assets/images/panels/shuanghuamianhou.png")
    },
    {
      name: "四画面",
      num: 4,
      img: require("@/assets/images/panels/sihuamianqian.png"),
      activeImg: require("@/assets/images/panels/sihuamianhou.png")
    },
    {
      name: "九画面",
      num: 9,
      img: require("@/assets/images/panels/jiuhuamianqian.png"),
      activeImg: require("@/assets/images/panels/jiuhuamianhou.png")
    }
  ];
  // 视频弹窗
  isInspetionVideo: boolean = false
  mounted() {
    this.init(this.equipmentData);
    //测试用
    this.$nextTick(() => {
      this.videoLogin();
    });
    // this.getAccessToken();
  }
  beforeDestroy() {
    this.removeEvent();
  }
  removeEvent() {
    if (this.timeEvent) window.clearInterval(this.timeEvent);
  }
  //初始化参数
  init(val: any) {
    try {
      this.videoCodeArr = [];
      this.active = "";
      if (!val) {
        return this.$message.warning("该区域无监控设备");
      }
      this.cameraList = val.jksbList ? val.jksbList : [];
      if (!this.cameraList.length) return;
      // const currentVideo = this.$store.getters["videoData/currentVideo"];
      const sbid = this.currentVideo.sbid;
      if (sbid) this.videoCodeArr.push(sbid);
      this.onChangeType();
      this.$store.commit(
        "videoPanel/setVideoTitle",
        this.projectInfo.xmmc || ""
      );
      this.active = "单画面";
    } catch (error) {
      console.log(error);
    }
  }
  //测试环境的视频登录
  async videoLogin() {
    this.loading = true;
    try {
      const win: any = window;
      const loginForm = win.videoDataConfig.loginForm;
      const res: any = await VideoUrlLogin();
      const AccessCode = res.data.AccessCode;
      const data: any = {
        UserName: loginForm.UserName,
        AccessCode,
        LoginSignature: CryptoJS.MD5(
          toBase64(loginForm.UserName) +
            AccessCode +
            CryptoJS.MD5(loginForm.password).toString()
        ).toString()
      };
      const ress: any = await VideoUrlLogin2(data);
      const AccessToken = ress.data.AccessToken;
      // let vmip:any = document.querySelector('#ip');
      setAccessToken(AccessToken);
      this.removeEvent();
      win.imosSdk
        .init(loginForm.serverIp, AccessToken, 9, loginForm.IframeUrl)
        .then(() => {
          console.log("初始化视频成功");
          this.handleClick(this.buttonList[0]);
          this.timeEvent = setInterval(this.keepalive, 30000);
        })
        .catch((err: any) => {
          console.log("初始化视频失败");
          alert("调用失败" + err);
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    } catch (error) {
      this.loading = false;
    }
  }
  keepalive() {
    keepalive().then(() => {
      console.log("keepalive" + new Date());
    });
  }
  onChangeType() {
    if (!this.videoCodeArr.length) return;
    if (
      this.panelWindowNum === 1 &&
      this.videoCodeArr.length > this.panelWindowNum
    ) {
      this.videoCodeArr = [this.videoCodeArr[1]];
    } else if (this.videoCodeArr.length > this.panelWindowNum) {
      this.videoCodeArr = this.videoCodeArr.slice(0, this.panelWindowNum);
      return this.$message.warning(
        `当前仅支持${this.panelWindowNum}画面，若要展示更多的监控画面，请选择对应的画面`
      );
    }
    this.$store.commit("videoData/setVideoType", this.options);
    this.isInspetionVideo = true;
    // this.$store.commit("videoPanel/setDialogShow", true);
    this.$store.commit("videoData/setVideoTitle", this.projectInfo.xmmc || "");
    // this.$store.commit("videoPanel/setDialog", "InspetionVideo");
    this.$store.commit("videoData/setVideoCodeArr", this.videoCodeArr);
  }
  handleClick(item: any) {
    this.active = item.name;
    this.panelWindowNum = item.num;
    this.videoCodeArr = this.videoCodeArr.slice(0, this.panelWindowNum);
    this.$store.commit("videoData/setVideoType", this.options);
    this.$store.commit("videoData/setVideoTitle", this.projectInfo.xmmc || "");
    this.isInspetionVideo = true;
    // this.$store.commit("videoPanel/setDialogShow", true);
    // this.$store.commit("videoPanel/setDialog", "InspetionVideo");
    this.$store.commit("videoData/setPanelWindowNum", item.num);
    this.$store.commit("videoData/setVideoCodeArr", this.videoCodeArr);
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 205px;
  .area-select {
    width: 100%;
    height: 36px;
    background-color: rgba(22, 88, 160, 0.18);
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 10px;
    .area-type {
      width: 100%;
    }
  }
  ::v-deep .el-input__inner {
    background-color: #001022;
    border-color: #1658a0;
  }
  .button-group {
    display: flex;
    justify-content: flex-start;
    .button-list {
      color: #b4d8f7;
      margin-right: 29px;
      cursor: pointer;
      position: relative;
      .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        position: absolute;
        top: 21px;
      }
      .active-box {
        width: 102px;
        height: 102px;
        background-image: url(../../assets/images/panels/fenpingbeijingdianjihou.png);
        background-size: 100% 100%;
      }
      .box {
        width: 102px;
        height: 102px;
        background-image: url(../../assets/images/panels/fenpingbeijingdianjiqian.png);
        background-size: 100% 100%;
      }
      &:hover {
        width: 102px;
        height: 102px;
        background-image: url(../../assets/images/panels/fenpingbeijingdianjihou.png);
        background-size: 100% 100%;
      }
      span {
        position: absolute;
        margin-top: 53px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #2b64b975;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: rgba(43, 100, 185, 0.45882);
}
.el-tag.el-tag--info {
  background-color: #002342;
  border-color: #002342;
  color: #fff;
}
.area-popper .el-select-dropdown__item.hover,
.area-popper .el-select-dropdown__item:hover {
  background-color: transparent;
  background-size: 100% 100%;
  background-image: url(/_nuxt/assets/images/panels/xialakuangdaxuanzhongtiao.png);
}
</style>
